<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/jquery/jquery-1.7.2.min.js"></script>
<title>Insert title here</title>
<style>
			*{
				margin:0px;
				padding:0px;}
			body{
				font-size:13px;
				background:#EEF7F7;
				font-family: Constantia, serif;}
			#ALL{
				margin:20px auto;
				text-align:center;
				width:600px;
				position:relative;}
			h1{
			   color:#555;
			   font-size:36px;
			   text-shadow:1px 1px 1px #999;
			   padding:20px; }
			#form{
				width:600px;
				background:#f9f9f9;
				border:2px solid #fff;
				box-shadow:0px 0px 3px #aaa;
				border-radius:10px;
				overflow:hidden;}
			#steps{
				width:600px;
				overflow:hidden;}
			.step{
				float:left;
				width:600px;}
			#navigation{
				height:45px;
				background:#DDECE1;  
				border-bottom-left-radius:10px;
				border-bottom-right-radius:10px;}
			#navigation ul{
				list-style:none;
				float:left;
				margin-left:55px;}
			#navigation ul li{
				float:left;
				position:relative;
				width: 90px;
				border-right:1px solid #ccc;
				border-left:1px solid #ccc;
				margin:0px 3px;}
			#navigation ul li a{
				display:block;				
				height:45px;
				line-height:45px;
				color:#666;
				padding:0px 20px;
				font-weight:bold;
				text-decoration:none;
				border-right:1px solid #fff;
				border-left:1px solid #fff;
				background:
					-webkit-gradient(
					linear,
					left bottom,
					left top,
					color-stop(0.09, rgb(240,240,240)),
					color-stop(0.45, rgb(225,227,227)),
					color-stop(0.78, rgb(240,240,240))
					);}
			#navigation ul li a:hover,
			#navigation ul li.selected a{
				background:#f9f9f9;
				color:#006600;
				text-shadow:1px 1px 1px #fff;}
			#steps form fieldset{
				border:none;
				padding-bottom:20px;}
			#steps form legend{
				background:#DDECE1;
				color:#006600;
				font-size:24px;
				text-shadow:1px 1px 1px #fff;
				font-weight:bold;
				text-align:left;
				float:left;
				width:590px;
				padding:10px 0px 10px 10px;
				margin-bottom: 15px;}
			#steps form p{
				float:left;
				clear:both;
				width:400px;
				background:#f4f4f4;
				margin:5px 0px;
				padding:10px;
				border:1px solid #fff;
				box-shadow:0px 0px 2px #aaa;
				margin-left:90px;
				border-radius: 3px;}
			#steps form p label{
				width:160px;
				float:left;
				text-align:right;
				margin-right:15px;
				line-height:28px;
				color:#666;
				font-weight:bold;}
			#steps form input:not([type=radio]),
			#steps form textarea,
			#steps form select{
				width: 200px;
				float:left;
				background: #ffffff;
				border: 1px solid #ddd;
				border-radius: 2px;
				outline: none;
				padding: 5px;	}
			#steps form input:focus{
				box-shadow:0px 0px 2px #aaa;
				background-color:#FFFEEF;}
			#steps form p.submit{
				background:none;
				border:none;
				box-shadow:none;}
			#steps form button {
				display: block;
				border:none;
				outline:none;
				background:#99CCCC;
				color: #ffffff;;	
				border-radius: 10px;
				margin: 0px auto;
				padding: 7px 25px;
				text-shadow: 0 1px 1px #777;
				font-weight:bold;
				font-size:22px;
				box-shadow:0px 0px 3px #aaa;
				cursor:pointer;}
			#steps form button:hover {
				background:#d8d8d8;
				color:#666;
				text-shadow:1px 1px 1px #fff;}

			span.checked{
				position:absolute;
				top:0px;
				left:1px;
				border: 10px solid black;
				border-color: #A4E798 transparent transparent #A4E798;}

			span.error{    
				position:absolute;
				top:0px;
				left:1px;
				border: 10px solid black;
				border-color: #CA6274 transparent transparent #CA6274;}
		</style>
</head>
<body>
<div id="ALL">
            <h1>JQUERY SLIDING FORM</h1>
            <div id="form">
                <div id="steps">
                    <form id="formEl" action="" method="post">

                        <fieldset class="step">
                            <legend>STEP 1</legend>
                            <p>
                                <label for="name">이름</label>
                                <input id="name" name="name" />
                            </p>
                            <p>
                                <label for="id">아이디</label>
                                <input id="id" name="id" />
                            </p>
                            <p>
                                <label for="password">비밀번호</label>
                                <input id="password" name="password" type="password" />
                            </p>
                        </fieldset>

                        <fieldset class="step">
                            <legend>STEP 2</legend>
                            <p>
                                <label for="email">E-mail</label>
                                <input id="email" name="email" type="text" />
                            </p>
                            <p>
                                <label for="address">주소</label>
                                <input id="address" name="address" type="text" />
                            </p>
                            <p>
                                <label for="phone">Phone</label>
                                <input id="phone" name="phone" placeholder="ex. 0318736765" type="tel" />
                            </p>
                        </fieldset>

                        <fieldset class="step">
                            <legend>STEP 3</legend>
                            <p>
                                <label for="course">수강과목</label>
                                <select id="course" name="course" >
                                    <option>jQuery</option>
                                    <option>jQuery UI</option>
                                    <option>jQuery Mobile</option>
                                </select>
                            </p>
                            <p>
                                <label for="time">신청기간</label>
                                <input id="time" name="time" type="number" />
                            </p>
                            <p>
                                <label for="etc">기타사항</label>
                                <input id="etc" name="etc" type="text" />
                            </p>
                        </fieldset>

                        <fieldset class="step">
                            <legend>STEP 4</legend>
                            <p>
                                <label for="payment">결제방법</label>
                                <select id="payment" name="payment">
                                    <option value="cash" selected>무통장입급</option>
                                    <option value="card">신용카드결제</option>
                                </select>
                            </p>
                            <p>
                                <label for="bank">입금은행선택</label>
                                <select id="bank" name="bank">
                                    <option value="1" selected>농협</option>
                                    <option value="2">신한</option>
                                    <option value="3">국민</option>
                                </select>
                            </p>
							<p>
                                <label for="remitter">입금자명</label>
                                <input id="remitter" name="remitter" type="text" />
                            </p>
                        </fieldset>

						<fieldset class="step">
                            <legend>STEP 5</legend>
							<p>
								모든 단계가 올바르게 진행되었다면 아래의 완료버튼을 누르세요. 			
								<br/>모든항목이 초록색으로 표시되어야 완료하실 수 있습니다.
								<br/>붉은색으로 표시된 항목에 대해서는 재작성 바랍니다.
							</p>
                            <p class="submit">
                                <button id="completeButton" type="submit">완료</button>
                            </p>
                        </fieldset>
                    </form>
                </div>

                <div id="navigation" style="display:none;">
                    <ul>
                        <li class="selected">
                            <a href="#">STEP 1</a>
                        </li>
                        <li>
                            <a href="#">STEP 2</a>
                        </li>
                        <li>
                            <a href="#">STEP 3</a>
                        </li>
                        <li>
                            <a href="#">STEP 4</a>
                        </li>
						<li>
                            <a href="#">STEP 5</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
     
	<script type="text/javascript">
			$(function(){

				var allfieldset = $('#formEl').children().length;
				var current = 1;


				var stepsWidth	= 0;
				var width 		= new Array();
				$('#steps .step').each(function(i){
					var $this 		= $(this);	
					width[i]  		= stepsWidth;
					stepsWidth	 	+= $this.width();	//3000
				});
				$('#steps').width(stepsWidth);

				$('#formEl').children(':first').find(':input:first').focus();	

				$('#navigation').show();

				$('#navigation a').bind('click',function(e){	
					var $this	= $(this);
					var prev	= current;
					current = $this.parent().index() + 1;

					$this.closest('ul').find('li').removeClass('selected');
					$this.parent().addClass('selected');

					$('#steps').stop().animate({
						marginLeft: '-' + width[current-1] + 'px'
					},500,function(){
						$('#formEl').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();

						if(current == allfieldset)
							validateSteps();
						else						
							validateStep(prev);
					});

					e.preventDefault();
				});



				function validateSteps(){
					var FormErrors = false;
					for(var i = 1; i < allfieldset; ++i){
						var error = validateStep(i);
						if(error == -1)
							FormErrors = true;	
					}
					$('#formEl').data('err',FormErrors);	
				}


				function validateStep(prev){
					if(prev == allfieldset) return;

					var error = 1;				
					var hasError = false;	

					$('#formEl').children(':nth-child('+ parseInt(prev) +')').find(':input:not(button)').each(function(){
						var $this = $(this);
						var valueLength = jQuery.trim($this.val()).length;
						if(valueLength == ''){
							hasError = true;
							$this.css('background-color','#FFEDEF');
						}
						else
							$this.css('background-color','#FFFFFF');	
					});

					var $link = $('#navigation li:nth-child(' + parseInt(prev) + ') a');
					$link.parent().find('.error,.checked').remove();

					if(hasError){
						error = -1;
						valclass = 'error';
					}
					else
						var valclass = 'checked';

					$('<span class="'+valclass+'"></span>').insertAfter($link);
					
					return error;
				}



				$('#completeButton').bind('click',function(){
					if($('#formEl').data('err')){
						alert('빈 항목이 존재합니다.');
						return false;
					}	
				});



			});
		</script>
</body>
</html>